<script setup>
import OApageheader from '../../components/OApageheader.vue';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';
import apiClient from '../../api/api';
import OAMain from '../../components/OAMain.vue';

// 引入 echarts 核心模块及相关组件
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册 echarts 组件
echarts.use([
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer
]);

const chartRef = ref(null);         // DOM 容器引用
let chartInstance = null;           // ECharts 实例

// 初始化图表
const initChart = (data) => {
  if (!chartRef.value) return;

  // 初始化 ECharts 实例
  chartInstance = echarts.init(chartRef.value);

  const option = {
    tooltip: {},
    // x轴
    xAxis: {
      type: 'category',
      data: data.map(item => item.name),
      axisLabel: {
        interval: 0,
        rotate: 30
      }
    },
    // y轴
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '员工数',
        type: 'bar',
        data: data.map(item => item.count),
        itemStyle: {
          color: '#409EFF'
        }
      }
    ]
  };

  chartInstance.setOption(option);
  window.addEventListener('resize', chartInstance.resize); // 响应式
};
let informs = ref([]); // 通知数据对象，用于存储通知数据
let absents = ref([]); // 考勤数据对象，用于存储考勤数据

// 页面加载时请求数据并初始化图表
onMounted(async () => {
  try {
    const res = await apiClient.get('home/staff/count/'); // 发送请求，获取各部门员工数量数据
    initChart(res.data);
    const res2 = await apiClient.get('home/latest/inform/'); // 发送请求，获取通知数据
    informs.value = res2.data;
    const res3 = await apiClient.get('home/latest/absent/');// 发送请求，获取考勤数据
    absents.value = res3.data;
  } catch (error) {
    ElMessage.error(error.message);
  }
});

// 页面卸载时移除监听器
onBeforeUnmount(() => {
  if (chartInstance) {
    window.removeEventListener('resize', chartInstance.resize);
    chartInstance.dispose();
  }
});
</script>

<template>
  <OAMain>
    <OApageheader content="首页" />
    <el-card>
        <h3>部门员工数量统计</h3>
        <div ref="chartRef" style="width: 100%; height: 250px; margin-top: 10px;"></div>
    </el-card>

    <el-row :gutter="20">
        <!-- 通知内容 -->
        <el-col :span="12">
            <el-card>
                <h3>最新通知</h3>
                <el-table :data="informs" style="width: 100%">
                    <el-table-column  label="标题" >
                        <template #default="scope">
                            <router-link :to="'/inform/details/' + scope.row.id">{{ scope.row.title }}</router-link>
                                
                        </template>
                          
                    </el-table-column>

                    <el-table-column prop="create_time" label="发布时间" />
                    <el-table-column label="发布者">
                        <template #default="scope">
                            {{ '['+ scope.row.author.department.name +']'+ scope.row.author.realname }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
          </el-col>
       <!-- 考勤内容 -->
        <el-col :span="12">
          <el-card>
            <h3>部门最新考勤</h3>
            <el-table :data="absents" style="width: 100%">
                <el-table-column prop="type.name" label="类型" />
                <el-table-column prop="creat_time" label="发布时间" />
                <el-table-column prop="start_time" label="开始时间" />
                <el-table-column prop="end_time" label="结束时间" />
                <el-table-column label="发布者">
                  <template #default="scope">
                      {{ '['+ scope.row.requester.department.name +']'+ scope.row.requester.realname }}
                  </template>
              </el-table-column>
               
            </el-table>
        </el-card>
        </el-col>
    </el-row>
  </OAMain>
</template>

<style scoped>
</style>
